<!DOCTYPE html>
<html>
<head>
<title>结算</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${ctxPath}/css/bootstrap.min.css" rel="stylesheet"
	media="screen">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="${ctxPath}/css/style.css" rel="stylesheet" media="screen">
<script src="${ctxPath}/js/alertUtil.js"></script>
<script src="${ctxPath}/js/citydata.js"></script>
<script src="${ctxPath}/js/cityPicker-1.1.4.js"></script>
<script type="text/javascript">
	$(function(){
		var Get = {
				shopCartIds: null,
				getShopCartIds: function(){
					this.shopCartIds = "${shopCartIds}";
					return this.shopCartIds;
				},
				removeShopCart: function(id){
					this.shopCartIds = this.shopCartIds.replace(id, "");
				}
		};
		//原生城市-无联动
		var select = $('.city-picker-select').cityPicker({
			dataJson: cityData,
			renderMode: false,
			autoSelected: true
		});

		//设置城市
		select.setCityVal([{
			'id': '110000',
			'name': '北京市'
		}, {
			'id': '110100',
			'name': '北京市'
		}, {
			'id': '110108',
			'name': '海淀区'
		}]);

		$('#address li').hover(function(){
			$(this).children(".address-btn").show()
		},function(){
			$(this).children(".address-btn").hide();
		});
		
		$('.add-address').on('click', function(){
			$('.add-address-div').show();
		});
		
		$('#product-pay').load('settlement-pay',{
			"shopCartIds": Get.getShopCartIds()
		},function(data){
			$('#product-pay').html(data);
		});
		
		$("#product-pay").on('click', '.btn-delete', function(){
			$(this).parents('tr').remove();
			$(".total span").text(Math.subtraction($(".total span").text(), $(this).attr('price')));
			Get.removeShopCart($(this).parents('tr').attr('id'));
		});
		
		$("#product-pay").on('click', '.total', function(){
			if($(this).find('span').text() <= 0 || Get.shopCartIds == "" || Get.shopCartIds == null){
				return;
			}
			$.post('');
		});
		
		var Math = {
				subtraction: function(n1, n2){
					var n = parseInt(n1 * 100) - parseInt(n2 * 100);
					return n/100;
				}
		};
		
	});
</script>

<style type="text/css">
	.table thead td {
		background-color: #f3f3f3 !important;
		height: 30px;
	}
	
	.table td {
		text-align: center;
		vertical-align: inherit;
		background-color: white !important;
	}
	
	.table{
		margin-bottom: 0px !important;
	}
	
	.btn{
		font-size:12px;
	}
	
	.form-group .span1{
		line-height: 30px;
	}
	.form-group input{
		height: 30px;
	}
	
	.panel-heading span{
	    right: 5px;
	    top: 5px;
	}
	
	img{
	    width: 80px;
	    height: 90px;
	}
	
	.sc-title{
	    position: absolute;
	    top: calc(50% - 10px);
	    left: 100px;
	}
	
</style>
</head>
<body>

	<div class="container-fluid">
		<div id="product-pay" class="col-xs-7 col-md-offset-1">
			<% #ajax pay:{ %>
			<table class="table table-striped">
				<thead>
					<tr>
						<td width="50%">商品信息</td>
						<td>数量</td>
						<td>金额</td>
						<td>操作</td>
					</tr>
				</thead>

				<tbody class="f-s-12">
					<% 	var total = 0;
						for(shopCart in shopCarts!){
							total = total + shopCart.price;
					%>
					<tr class="bor-1 bor-t-n-im" id="${shopCart.id}">
						<td class="txt-l-im pos-re ver-c-im"><img class="col-sx-1" src="${shopCart.url}"><div class="sc-title">${shopCart.title}</div></td>
						<td class="ver-c-im">${shopCart.number}</td>
						<td class="ver-c-im" style="color:red;">¥<span>${shopCart.price}</span></td>
						<td class="ver-c-im"><button type="button" price="${shopCart.price}" class="btn btn-danger btn-delete">删除</button></td>
					</tr>
					<% }%>
				</tbody>
			</table>
			<div class="f-r"><button type="button" class="btn btn-danger total">确认付款 (¥<span>${total}</span>)</button></div>
			<% }%>
		</div>
		
		<div id="address-tab">
			<div class="col-xs-4">
				<div class="panel panel-default mar-t-n-im mar-b-n-im f-s-12">
					<div class="panel-heading txt-c">
						<h3 class="panel-title">收货地址</h3>
					</div>
					<div class="panel-body">
						<p>上海市上海市</p>
						<p>宝山区东鼎国际大厦</p>
						<p>155252524635</p>
					</div>
					<div id="address" class="collapse">
						<ul class="li-n pad-l-n-im">
								<li class="bor-t-1 pos-re" style="margin-top:0px;">
									<div>
										<p>上海市上海市</p>
										<p>宝山区东鼎国际大厦</p>
										<p>155252524635</p>
									</div>
									<div class="pos-ab address-btn hidden-new">
										<button class="btn">选择</button></br>
										<button class="btn">设为默认地址</button>
									</div>
								</li>
							<li class="bor-t-1 pos-re" style="margin-top:0px;">
								<div>
									<p>上海市上海市</p>
									<p>宝山区东鼎国际大厦</p>
									<p>155252524635</p>
								</div>
								<div class="pos-ab address-btn hidden-new">
									<button class="btn">选择</button></br>
									<button class="btn">设为默认地址</button>
								</div>
							</li>
						</ul>
					</div>
				</div>
				
				<button type="button" class="mar-t-5 btn btn-primary f-r" data-toggle="collapse" data-target="#address">
					选择收货地址
				</button>
				<button type="button" class="mar-t-5 mar-r-5 add-address btn btn-success f-r">
					新增收货地址
				</button>
			</div>
		</div>
		
		<div class="add-address-div hidden-new">
			<div class="add-address-tab alert-util panel panel-default f-s-12 cen-in-cen">
				<div class="panel-heading txt-c">
					<h3 class="panel-title">新增收货地址</h3>
					<span class="pos-ab poin">X</span>
				</div>
				<div class="panel-body">
					<div class="city mar-b-40">
						<div class="span1">所在地区<span style="color:red;">*</span></div>
						<div class="span6 city-picker-select"></div>
					</div>
					
					<div class="city-deil">
						<div class="span1">详细地址<span style="color:red;">*</span></div>
						<div class="span6 mar-b-10">
							<textarea rows="5" class="txt-wid" placeholder="请填 写详细地址,如街道名称,门牌号码,楼层和房间号等信息"></textarea>
						</div>
					</div>
					
					<div class="form-group">
						<div class="span1">邮政编码</div><div class="span6"><input type="text" placeholder="如不清楚邮递区号,请填000000"/></div>
					</div>
					
					<div class="form-group">
						<div class="span1">手机号码</div><div class="span6"><input type="text" /></div>
					</div>
					<div class="form-group">
						<div class="span1"></div>
						<div class="span6"><input type="checkbox" class="mar-t-n-im"> 设为默认收货地址</div>
					</div>
					<div class="form-group">
						<div class="span1"></div>
						<div class="span6"><button class="btn btn-success">保存</button></div>
					</div>
				</div>
			</div>
			<div class="alert-mask ptr"></div>
		</div>
		
	</div>
	
	
	
</body>
</html>